<template>
    <div class="page rdsp-fix-botttom-page finishMsg-page" data-page="finishMsg" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">隐患详情</div>
            <div class="go-history-list">
                <a href="#" class="link" @click="attention">
                    <i class="iconfont icon--" id="noAttention_{{getNewId}}" style="font-size: 23px;"></i>
                    <i class="iconfont icon--" id="attention_{{getNewId}}" style="font-size: 23px;display: none;"></i>
                </a>
            </div>
        </div>
        <div class="page-content" style="padding: 5px 20px;padding-bottom: 50px;">
            <!--轮播图片-->
            <div id="hiddenCheck-swiper_{{getNewId}}" class="swiper-container">
                <div class="swiper-pagination" id="hiddenCheck_pagination_{{getNewId}}"></div>
                <div class="swiper-wrapper" id="hiddenCheck_swiper_{{getNewId}}"></div>
            </div>
            <div class="form-hiddenDanger">
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block" id="trouble-pai-people_{{getNewId}}">
                        <div class="right-con">
                            <div class="right-datail tb-appoint-person">由<span id="tb-person_{{getNewId}}"></span>指派</div>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div id="troubledes_app_{{getNewId}}"></div>
                        <div class="right-con">
                            <div id="hiddenDangerDesc_{{getNewId}}" class="right-datail tb-appoint-detail">

                            </div>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div class="right-con">
                            <div class="right-datail">
                                <i class="iconfont icon-APPicon_dingwei" style="color:#2471CA;font-size: 14px;"></i><span class="tb-adds" id="tb-adds_{{getNewId}}"></span></div>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div class="right-con create-person">
                            <div class="right-datail tb-create-info">
                                <div><img src="/ilink-app-h5-zd/static/img/rdspFile_1553591751238.png"
                                        class="appoint-tx-img"></div>
                                <div class="tb-sava-name" id="tb-sava-name_{{getNewId}}"></div>
                                <div class="appoint-create-time">创建于<span id="tb-sava-time_{{getNewId}}"></span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="form-hiddenDanger basic-item-info">
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="fl trouble-left-title">责任单位</div>
                        <div class="has-arrow">
                            <div id="tb-resUnit_{{getNewId}}" @click="select_unit"></div>

                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="fl trouble-left-title">责任人</div>
                        <div class="  has-arrow">
                            <div id="tb-respel_{{getNewId}}"></div>

                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">隐患等级</div>
                        <div class="has-arrow">
                            <div id="tb-level_{{getNewId}}"></div>

                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">隐患类别</div>
                        <div class="has-arrow">
                            <div id="tb-type_{{getNewId}}"></div>

                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">相关资产</div>
                        <div id="tb-assts_{{getNewId}}" class="fr"></div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">相关物联设备</div>
                        <div id="tb-eqSys_{{getNewId}}" class="fr"></div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">消防系统</div>
                        <div id="tb-fireSys_{{getNewId}}" class="fr"></div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class=" fl trouble-left-title">整改期限</div>
                        <div class="has-arrow">
                            <div id="tb-endtime_{{getNewId}}" style="left: 0px"></div>

                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 15px;color: #333333; font-size: 17px;margin-bottom: 35px;font-weight: 600;">整改记录</div>
            <div id="tb-modify-finish-detail_{{getNewId}}"></div>
            <div id="zpView_{{getNewId}}"  class="trouble-content-head">
                <div class="el-timeline-item__tail"></div>
                <div class="trouble-detail-type">派</div>
                <div class="trouble-time" id="trouble-appoint-time_{{getNewId}}"></div>
                <div class="trouble-detail-content">由<span id="trouble-appoint-account_{{getNewId}}"></span>指派<span
                        id="trouble-manage-account_{{getNewId}}"></span>为责任人</div>
            </div>
            <div class="trouble-content-head">
                <!-- <div class="el-timeline-item__tail"></div> -->
                <div class="trouble-detail-type">建</div>
                <div class="trouble-time" id="trouble-create-time_{{getNewId}}"></div>
                <div class="trouble-detail-content">由<span id="trouble-create-account_{{getNewId}}"></span>创建</div>
            </div>
        </div>
    </div>
</template>
<style scoped>

    .tb-adds {
        font-size: 14px;
        color: #999999;
        margin-left: 4px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .tb-sava-name {
        position: relative;
        top: -52px;
        left: 71px;
        font-size: 16px;
        color: #333333;
    }
    .tb-voice {
        width: 80px;
        height: 32px;
        background-color: #efefef;
        border-radius: 4px;
        line-height: 32px;
    }
    .tb-voice-png {
        width: 12px;
    }
    .trouble-stop {
        padding: 0 25px;
    }
    .every-hidden-list{
        height: 200px;
    }
    .trouble-content-head{
        padding-bottom: 0px;
    }
</style>
<script>
    return {

        data: function () {
            return {
                details: null,
                picUrls: '',
                isCollect: 0,
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            //关注
            attention: function () {
                var self = this;
                var $ = self.$;
                if (self.isCollect == 1) { // 取消关注
                    app.params.dialog.buttonCancel = "取消";
                    app.params.dialog.buttonOk = "确认";
                    // app.dialog.confirm('确认取消关注此隐患?', '确认', function () {
                        common.loading(1);
                        Dao.focusOnOff({
                            userAccount: userInfor.accountName,
                            type: "5",
                            userName: userInfor.accountName,
                            concemId: self.$route.params.id
                        }, function (data) {
                            common.loading(0);
                            self.isCollect = 0;
                            $("#noAttention_"+self.getNewId).css("color", "#333333");
                            $("#attention_"+self.getNewId).hide();
                            $("#noAttention_"+self.getNewId).show();
                            app.methods.showToastCenter("取消关注成功");
                        }, function (e) {
                            common.loading(0);
                            app.methods.showToastCenter("取消关注失败");
                        });
                    // });
                } else {
                    common.loading(1);
                    Dao.addUserConcem({
                        userAccount: userInfor.accountName,
                        type: "5",
                        concemId: self.$route.params.id,
                        userName: userInfor.accountName
                    }, function (data) {
                        common.loading(0);
                        self.isCollect = 1;
                        $("#attention_"+self.getNewId).css("color", "red");
                        $("#noAttention_"+self.getNewId).hide();
                        $("#attention_"+self.getNewId).show();
                        app.methods.showToastCenter("关注成功");
                    }, function (e) {
                        common.loading(0);
                        app.methods.showToastCenter("关注失败");
                    });
                }
            },

            htmlGetHidDanger: function (selectId) {
                var self = this;
                var hiddenDangerId = self.$route.params.id;
                if (selectId) {
                    hiddenDangerId = selectId;
                }
                common.loading(1);

                Dao.getHidDanger({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    account: userInfor.accountName,
                    hiddenDangerId: hiddenDangerId,
                }, function (data) {
                    showVoiceBtn("#troubledes_app_"+self.getNewId,data.voiceLength,data.hiddenDangerVoice);
                    self.details = data;
                    common.loading(0);
                    var image = "";

                    self.isCollect = data.isCollect;
                    if (self.isCollect == 1) { // 关注
                        $("#attention_"+self.getNewId).css("color", "red");
                        $("#attention_"+self.getNewId).show();
                        $("#noAttention_"+self.getNewId).hide();
                    }

                    var flag = false;
                    if (data.picUrls != null && data.picUrls != '') {
                        image = data.picUrls.split(',');
                        $("#hiddenCheck_swiper_"+self.getNewId).empty();
                        if (image.length > 1) {
                            flag = true;
                        }
                        for (var i = 0; i < image.length; i++) {
                            if(image[i].substr(image[i].length - 3) === 'mp4' || image[i].substr(image[i].length - 3) === '3gp' || image[i].substr(image[i].length - 4) === 'mpeg' || image[i].substr(image[i].length - 6) === 'mavip4' || image[i].substr(image[i].length - 3) === 'flv' || image[i].substr(image[i].length - 3) === 'mov'){
                                $("#hiddenCheck_swiper_" + self.getNewId).append(`<div class="swiper-slide every-hidden-list" data-index="`+i+`" style="background:url(` + staticPath + `img/common/video_list_detail.png` + `) center no-repeat;background-size: cover;"></div>`)
                            }else{
                                $("#hiddenCheck_swiper_" + self.getNewId).append(`<div class="swiper-slide every-hidden-list" data-index="`+i+`" style="background:url(` + image[i] + `) center no-repeat;background-size: cover;"></div>`);
                            }
                        }
                        app.lazy.create("#hiddenCheck_swiper_"+self.getNewId);
                        jQuery("#hiddenCheck_swiper_"+self.getNewId).off('click').on('click', {
                            'data': image
                        }, function (e) {
                            let target = e.target.style.backgroundImage.slice(5,-2);
                            let index = e.data.data.indexOf(target);
                            openAndShowBigImage(e.data.data,index);
                        });
                        if (flag) {
                            var hiddenCheck_swiper = new Swiper('#hiddenCheck-swiper_'+self.getNewId, {
                                direction: 'horizontal',
                                loop: false,
                                slidesPerView: "auto",
                                pagination: {
                                    el: '#hiddenCheck_pagination_'+self.getNewId,
                                },
                            });
                        }
                    }

                    $("#hiddenDangerDesc_"+self.getNewId).empty();
                    $("#hiddenDangerDesc_"+self.getNewId).append(common.transNullundefinedToline(data.hiddenDangerDesc));
                    // $("#hiddenDangerDesc").append(`
                    // 		<a href="#" style="float: right;color: #000;">
                    //           <i class="iconfont icon-APPicon_yuyin-"></i>
                    //         </a>`);
                    $("#tb-adds_"+self.getNewId).empty();
                    $("#tb-adds_"+self.getNewId).append(common.transNullundefinedToline(data.addrDesc));

                    //指派人
                    if (data.managerPerson && data.managerPersonName.length>0) {
                        $("#trouble-pai-people_"+self.getNewId).show();
                        $("#zpView_"+self.getNewId).show();
                        $("#tb-person_"+self.getNewId).html(data.managerPersonName).show();
                    } else {
                        $("#trouble-pai-people_"+self.getNewId).hide();
                        $("#zpView_"+self.getNewId).hide();
                    }
                    $("#tb-sava-name_"+self.getNewId).empty();
                    $("#tb-sava-name_"+self.getNewId).append(common.transNullundefinedToline(data.createAccountName));

                    $("#tb-sava-time_"+self.getNewId).empty();
                    $("#tb-sava-time_"+self.getNewId).append(common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(data.createTime)));

                    $("#tb-level_"+self.getNewId).empty();
                    $("#tb-level_"+self.getNewId).append(common.transNullundefinedToline(data.gradeName));

                    $("#tb-type_"+self.getNewId).empty();
                    $("#tb-type_"+self.getNewId).append(common.transNullundefinedToline(data.categoryName));
                    $("#tb-assts_"+self.getNewId).html(common.transNullundefinedToline(data.relateAssetsNames));
                    $("#tb-eqSys_"+self.getNewId).html(common.transNullundefinedToline(data.relateFcfNames));
                    $("#tb-fireSys_"+self.getNewId).html(common.transNullundefinedToline(data.systemName));
                    $("#tb-resUnit_"+self.getNewId).empty();
                    $("#tb-resUnit_"+self.getNewId).append(common.transNullundefinedToline(data.orgName));

                    $("#tb-respel_"+self.getNewId).empty();
                    $("#tb-respel_"+self.getNewId).append(common.transNullundefinedToline(data.chargePersonName));

                    $("#tb-endtime_"+self.getNewId).empty();
                    if (data.endTime != null && data.endTime != "") {
                        var timeArr = data.endTime.split(':');
                        $("#tb-endtime_"+self.getNewId).append(common.transNullundefinedToline(timeArr[0] + ":" + timeArr[1]));
                    }

                    $("#trouble-appoint-time_"+self.getNewId).empty();
                    $("#trouble-appoint-time_"+self.getNewId).append(common.getTimeToyyyymmddhhmm(data.updateTime));

                    $("#trouble-appoint-account_"+self.getNewId).empty();
                    $("#trouble-appoint-account_"+self.getNewId).append(common.transNullundefinedToline(data.managerPersonName));

                    $("#trouble-manage-account_"+self.getNewId).empty();
                    $("#trouble-manage-account_"+self.getNewId).append(common.transNullundefinedToline(data.chargePersonName));

                    $("#trouble-create-time_"+self.getNewId).empty();
                    $("#trouble-create-time_"+self.getNewId).append(common.getTimeToyyyymmddhhmm(data.createTime));

                    $("#trouble-create-account_"+self.getNewId).empty();
                    $("#trouble-create-account_"+self.getNewId).append(common.transNullundefinedToline(data.createAccountName));
                    $("#tb-endtime_"+self.getNewId).empty();
                    if (data.endTime != null && data.endTime != "") {
                        var timeArr = data.endTime.split(':');
                        $("#tb-endtime_"+self.getNewId).append(common.transNullundefinedToline(timeArr[0] + ":" + timeArr[1]));
                    }
                    //1整改记录或2驳回记录3修改信息
                    var details = data.details;
                    if (details != null && details.length > 0) {
                        $("#tb-modify-finish-detail_"+self.getNewId).empty();
                        for (var i = 0; i < details.length; i++) {
                            var bean = details[i];
                            //1整改记录
                            if (bean.type == 1) {
                                if(i==0 && data.status == 2){
                                    $("#tb-modify-finish-detail_"+self.getNewId).append(`
                                    <div class="trouble-content-head">
                                        <div class="trouble-detail-type" style="background-color:#77be07;">√</div>
                                        <div class="el-timeline-item__tail"></div>
                                        <div class="trouble-time">` + common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(bean.createTime)) + `</div>
                                        <div class="trouble-stop" id="rec-recordtrouble_` + (bean.id+"_"+self.getNewId)+`"></div>
                                        <div class="trouble-imgs" id="rec-record-img_` + (bean.id+"_"+self.getNewId)+`"></div>
                                        <div id="voiceContainer_` + (bean.id + "_" + self.getNewId) +`" style="margin-left:26px;"></div>
                                        <div class="trouble-detail-content-finshed">` + common.transNullundefinedToline(bean.detailDesc) + `</div>
                                        <div class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `核实通过</div>
                                    `);

                                    if (bean.isStopSystem == 1) {
                                        $("#rec-recordtrouble_" + bean.id+"_"+self.getNewId).html(`
                                            <span style='font-size: 12px;background-color: #f7b510;color: #fff;padding: 1px;border-radius: 3px;'>停用系统</span>
                                            <p><b>开始停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopStartTime) + `</p>
                                            <p><b>结束停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopEndTime) + `</p>
                                            <p><b>安全措施</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.safetyMethod) + `</p>
                                        `);
                                    }
                                    //展示语音
                                    showVoiceBtn("#voiceContainer_"+bean.id+"_"+self.getNewId,bean.detailVoiceLength,bean.detailVoiceUrl);

                                    if (bean.picUrls != null && bean.picUrls != '') {
                                        var image = bean.picUrls.split(',');
                                        showImage(jQuery("#rec-record-img_" + bean.id+"_"+self.getNewId), image.toString(), 3);
                                    }
                                }
                                else {
                                    $("#tb-modify-finish-detail_"+self.getNewId).append(`
                                    <div class="trouble-content-head">
                                        <div class="trouble-detail-type">整</div>
                                        <div class="el-timeline-item__tail"></div>
                                        <div class="trouble-time">` + common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(bean.createTime)) + `</div>
                                        <div class="trouble-stop" id="rec-recordtrouble_` + (bean.id+"_"+self.getNewId)+`"></div>
                                        <div class="trouble-imgs" id="rec-record-img_` + (bean.id+"_"+self.getNewId)+`"></div>
                                        <div id="voiceContainer_`+ (bean.id + "_" + self.getNewId) +`" style="margin-left:26px;"></div>
                                        <div class="trouble-detail-content-finshed">` + common.transNullundefinedToline(bean.detailDesc) + `</div>
                                        <div class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `整改</div>
                                    `);
                                    if (bean.isStopSystem == 1) {
                                        $("#rec-recordtrouble_"+ (bean.id + "_" + self.getNewId)).html(`
                                        <span style='font-size: 12px;background-color: #f7b510;color: #fff;padding: 1px;border-radius: 3px;'>停用系统</span>
                                        <p><b>开始停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopStartTime) + `</p>
                                        <p><b>结束停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopEndTime) + `</p>
                                        <p><b>安全措施</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.safetyMethod) + `</p>`);
                                    }
                                    //展示语音
                                    showVoiceBtn("#voiceContainer_"+bean.id+"_"+self.getNewId,bean.detailVoiceLength,bean.detailVoiceUrl);
                                    //展示图片
                                    if (bean.picUrls != null && bean.picUrls != '') {
                                        var image = bean.picUrls.split(',');
                                        showImage(jQuery("#rec-record-img_" + bean.id+"_"+self.getNewId), image.toString(), 3);
                                    }
                                }
                            }
                            //2驳回记录
                            else if (bean.type == 2) {
                                $("#tb-modify-finish-detail_"+self.getNewId).append(`
                                    <div class="trouble-content-head">
                                        <div class="trouble-detail-type">驳</div><div class="trouble-time">` + common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(bean.createTime)) +`</div>
                                        <div class="el-timeline-item__tail"></div>
                                        <div class="trouble-imgs" id="rec-record-img_` + (bean.id+"_"+self.getNewId)+`"></div>
                                        <div id="voiceContainer_`+ (bean.id + "_" + self.getNewId)+`" style="margin-left:26px;"></div>
                                        <div class="trouble-detail-content-finshed">` + common.transNullundefinedToline(bean.detailDesc) + `</div>
                                    <div class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `驳回</div>
                                `);

                                //展示语音
                                showVoiceBtn("#voiceContainer_"+bean.id+"_"+self.getNewId,bean.detailVoiceLength,bean.detailVoiceUrl);

                                if (bean.picUrls != null && bean.picUrls != '') {
                                    var image = bean.picUrls.split(',');
                                    showImage(jQuery("#rec-record-img_" + bean.id+"_"+self.getNewId), image.toString(), 3);
                                }

                            }
                            //3修改记录
                            else if (bean.type == 3) { }
                        }
                    }
                });
            },
        },
        on: {
            pageInit: function (e, page) {
                this.htmlGetHidDanger();
            },
        }
    }
</script>
